<template>
    <div class="addAirPlan">
        <custom-dialog title="新增方案" size="small" @dialogClose="dialogClose">
            <div class="topStep">
                <img src="@/assets/images/0927/step1.png" v-if="current == 1" />
                <img src="@/assets/images/0927/step2.png" v-if="current == 2" />
            </div>
            <div class="bottomContent">
                <div class="famc" v-if="current == 1">
                    <label>方案名称：</label>
                    <Input v-model="value" placeholder="请输入方案名称" style="width: 300px" />
                </div>
                <div class="settings" v-if="current == 1">
                    <div class="workMode">
                        <label class="leftLabel">工作模式</label>
                        <div>
                            <CheckboxGroup v-model="workMode">
                                <Checkbox label="调温"></Checkbox>
                                <Checkbox label="人感"></Checkbox>
                                <Checkbox label="温度"></Checkbox>
                                <Checkbox label="时间"></Checkbox>
                                <Checkbox label="手动"></Checkbox>
                                <Checkbox label="计量"></Checkbox>
                                <Checkbox label="临时"></Checkbox>
                            </CheckboxGroup>
                        </div>
                    </div>
                    <div class="work">
                        <div class="item">
                            <label class="leftLabel"> 制冷开启温度 </label>
                            <InputNumber :max="50" :min="1" v-model="value1"></InputNumber>
                            ℃
                        </div>
                        <div class="item">
                            <label class="leftLabel"> 制冷开机温度 </label>
                            <InputNumber :max="50" :min="1" v-model="value2"></InputNumber>
                            ℃
                        </div>
                        <div class="item">
                            <label class="leftLabel"> 制冷关机温度 </label>
                            <InputNumber :max="50" :min="1" v-model="value3"></InputNumber>
                            ℃
                        </div>
                    </div>
                    <div class="work">
                        <div class="item">
                            <label class="leftLabel"> 制热开启温度 </label>
                            <InputNumber :max="50" :min="1" v-model="value4"></InputNumber>
                            ℃
                        </div>
                        <div class="item">
                            <label class="leftLabel"> 制热开机温度 </label>
                            <InputNumber :max="50" :min="1" v-model="value5"></InputNumber>
                            ℃
                        </div>
                        <div class="item">
                            <label class="leftLabel"> 制热关机温度 </label>
                            <InputNumber :max="50" :min="1" v-model="value6"></InputNumber>
                            ℃
                        </div>
                    </div>
                    <div class="work">
                        <div class="item">
                            <label class="leftLabel"> 夏季判断温度 </label>
                            <InputNumber :max="50" :min="1" v-model="value7"></InputNumber>
                            ℃
                        </div>
                        <div class="item">
                            <label class="leftLabel"> 冬季判断温度 </label>
                            <InputNumber :max="50" :min="1" v-model="value8"></InputNumber>
                            ℃
                        </div>
                    </div>
                    <div class="work">
                        <div class="item">
                            <label class="leftLabel"> 夏季开机温度 </label>
                            <InputNumber :max="50" :min="1" v-model="value9"></InputNumber>
                            ℃
                        </div>
                        <div class="item">
                            <label class="leftLabel"> 冬季开机温度 </label>
                            <InputNumber :max="50" :min="1" v-model="value10"></InputNumber>
                            ℃
                        </div>
                    </div>
                    <div class="work">
                        <div class="item">
                            <label class="leftLabel"> 开启温度使能 </label>
                            <Select v-model="wdsnkq" style="width: 100px">
                                <Option v-for="item in wdsnkqList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </div>
                        <div class="item">
                            <label class="leftLabel"> 使能运行方式 </label>
                            <Select v-model="snyxfs" style="width: 100px">
                                <Option v-for="item in snyxfsList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </div>
                        <div class="item">
                            <label class="leftLabel"> 开关机控制 </label>
                            <Select v-model="kgjkz" style="width: 100px">
                                <Option v-for="item in kgjkzList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </div>
                    </div>
                    <div class="work">
                        <div class="item">
                            <label class="leftLabel"> 人感人数 </label>
                            <InputNumber :max="50000" :min="1" v-model="value11"></InputNumber>
                            人
                        </div>
                        <div class="item">
                            <label class="leftLabel"> 人感延时 </label>
                            <InputNumber :max="5000" :min="1" v-model="value12"></InputNumber>
                            秒
                        </div>
                        <div class="item">
                            <label class="leftLabel"> 临时设定时间 </label>
                            <InputNumber :max="50000" :min="1" v-model="value13"></InputNumber>
                            分
                        </div>
                    </div>
                </div>
                <div class="settings" v-if="current == 2">
                    <div class="timeSet">
                        <label>周一开启时间：</label>
                        <span>
                            <Checkbox v-model="zhouyi"></Checkbox>
                            人感
                        </span>
                        <TimePicker format="HH:mm" placeholder="" style="width: 80px" size="small"></TimePicker> ~
                        <TimePicker format="HH:mm" placeholder="" style="width: 80px" size="small"></TimePicker>
                    </div>
                    <div class="timeSet">
                        <label>周二开启时间：</label>
                        <span>
                            <Checkbox v-model="zhouyi"></Checkbox>
                            人感
                        </span>
                        <TimePicker format="HH:mm" placeholder="" style="width: 80px" size="small"></TimePicker> ~
                        <TimePicker format="HH:mm" placeholder="" style="width: 80px" size="small"></TimePicker>
                    </div>
                    <div class="timeSet">
                        <label>周三开启时间：</label>
                        <span>
                            <Checkbox v-model="zhouyi"></Checkbox>
                            人感
                        </span>
                        <TimePicker format="HH:mm" placeholder="" style="width: 80px" size="small"></TimePicker> ~
                        <TimePicker format="HH:mm" placeholder="" style="width: 80px" size="small"></TimePicker>
                    </div>
                    <div class="timeSet">
                        <label>周四开启时间：</label>
                        <span>
                            <Checkbox v-model="zhouyi"></Checkbox>
                            人感
                        </span>
                        <TimePicker format="HH:mm" placeholder="" style="width: 80px" size="small"></TimePicker> ~
                        <TimePicker format="HH:mm" placeholder="" style="width: 80px" size="small"></TimePicker>
                    </div>
                    <div class="timeSet">
                        <label>周五开启时间：</label>
                        <span>
                            <Checkbox v-model="zhouyi"></Checkbox>
                            人感
                        </span>
                        <TimePicker format="HH:mm" placeholder="" style="width: 80px" size="small"></TimePicker> ~
                        <TimePicker format="HH:mm" placeholder="" style="width: 80px" size="small"></TimePicker>
                    </div>
                    <div class="timeSet">
                        <label>周六开启时间：</label>
                        <span>
                            <Checkbox v-model="zhouyi"></Checkbox>
                            人感
                        </span>
                        <TimePicker format="HH:mm" placeholder="" style="width: 80px" size="small"></TimePicker> ~
                        <TimePicker format="HH:mm" placeholder="" style="width: 80px" size="small"></TimePicker>
                    </div>
                    <div class="timeSet">
                        <label>周日开启时间：</label>
                        <span>
                            <Checkbox v-model="zhouyi"></Checkbox>
                            人感
                        </span>
                        <TimePicker format="HH:mm" placeholder="" style="width: 80px" size="small"></TimePicker> ~
                        <TimePicker format="HH:mm" placeholder="" style="width: 80px" size="small"></TimePicker>
                    </div>
                </div>
                <el-button type="primary" class="nextBtn" @click="dialogClose" v-if="current == 2" style="margin-left: 10px"
                    >完成</el-button
                >
                <el-button type="primary" class="nextBtn" @click="current = 1" v-if="current == 2">上一步</el-button>
                <el-button type="primary" class="nextBtn" @click="current = 2" v-if="current == 1">下一步</el-button>
            </div>
        </custom-dialog>
    </div>
</template>

<script>
import customDialog from '@/components/customComponents/customDialog'
export default {
    name: 'addAirPlan',
    components: {customDialog},
    data() {
        return {
            wdsnkq: 1,
            wdsnkqList: [
                {
                    label: '开启',
                    value: 1
                },
                {
                    label: '关闭',
                    value: 0
                }
            ],
            snyxfs: 1,
            snyxfsList: [
                {
                    label: '按天使能',
                    value: 1
                },
                {
                    label: '按月使能',
                    value: 0
                }
            ],
            kgjkz: 1,
            kgjkzList: [
                {
                    label: '制冷/制热关机',
                    value: 1
                },
                {
                    label: '制冷/制热开机',
                    value: 0
                }
            ],
            workMode: [],
            current: 1,
            value1: 28,
            value2: 28,
            value3: 26,
            value4: 10,
            value5: 10,
            value6: 20,
            value7: '',
            value8: '',
            value9: '',
            value10: '',
            value11: '',
            value12: '',
            value13: 30
        }
    },
    computed: {},
    created() {},
    methods: {
        dialogClose() {
            this.$emit('dialogClose', '')
        }
    }
}
</script>

<style lang="scss" scoped>
.topStep {
    width: 100%;
    overflow: hidden;
}
.bottomContent {
    .famc {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .settings {
        margin-top: 10px;
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        .leftLabel {
            width: 100px;
            display: inline-block;
            text-align: left;
        }
        .workMode {
            display: flex;
            width: 100%;
        }
        .work {
            margin-top: 10px;
            display: flex;
            width: 100%;
            gap: 10px;
            .item {
                width: calc((100% - 10px) / 3);
            }
        }
        .timeSet {
            margin-top: 10px;
            display: flex;
            width: 100%;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }
    }
    padding: 20px 0;
    .nextBtn {
        margin-top: 10px;
        float: right;
    }
}
</style>